<template>
  <div class="container">
    <!-- 办结统计 -->
    <div class="module">
      <div class="base-info">
        <div class="item">
          今日受理:
          <span>{{ done.data.todoToday }}</span>
        </div>
        <div class="item">
          今日办结:
          <span>{{ done.data.doneToday }}</span>
        </div>
        <div class="item">
          办结率:
          <span>{{ done.data.doneRateToday }}</span>
        </div>
        <div class="item">
          累计受理:
          <span>{{ done.data.todoTotal }}</span>
        </div>
        <div class="item">
          累计受理:
          <span>{{ done.data.doneTotal }}</span>
        </div>
        <div class="item">
          办结率:
          <span>{{ done.data.doneRateTotal }}</span>
        </div>
      </div>
      <div class="chart-title">
        <div class="title">{{ getYear(done.data.timestamp) }}年度统计大厅办结量</div>
        <div class="unit">单位（万件）</div>
      </div>
      <e-charts
        class="done-chart"
        :option="doneOption"
      />
    </div>
    <!-- 业务统计 -->
    <div class="module">
      <e-charts
        ref="bizChart"
        class="biz-chart"
        :option="bizOption"
      />
    </div>
    <!-- 热门事项 -->
    <div class="module">
      <div class="top5">
        <div
          v-for="(item, i) in top5.data"
          :key="i"
          class="item"
        >
          <div class="icon">
            <!-- <svg-icon :icon-class="`${ location.origin }/icons/奖牌.svg`" /> -->
            <img src="/icons/奖牌.svg" alt="">
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="bar-container">
            <div
              class="bar"
              :style="{
                width: `${(item.count / top1) * 100}%`,
                backgroundColor: `${top5colors[i]}`
              }"
            >
              {{ item.count }}
            </div>
          </div>
        </div>
      </div>
      <e-charts
        class="hot-chart"
        :option="hotOption"
      />
    </div>
    <!-- 部门业务 -->
    <div class="module">
      <e-charts
        class="department-chart"
        :option="departmentOption"
      />
    </div>
    <!-- 新增用户情况 -->
    <div class="module">
      <e-charts
      class="done-chart"
      :option="userOption"
    />
    </div>
    <!-- 1-12月份会议数据 -->
    <div class="module">
      <e-charts
        class="conference-chart"
        :option="conferenceOption"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'HomePage',
  data() {
    return {
      top5colors: [
        '#eb2d26',
        '#ec4e29',
        '#ec6e24',
        '#e98c1f',
        '#e6aa2e'
      ],
      location
    }
  },
  computed: {
    ...mapState('datavis', [
      'done',
      'department',
      'top5',
      'hot',
      'biz',
      'meeting',
      'newUsersThisWeek'
    ]),
    ...mapGetters('datavis', [
      'top1'
    ]),
    bizOption() {
      return {
        series: [
          {
            type: 'pie',
            radius: [40, 80],
            center: ['50%', '50%'],
            roseType: 'radius',
            showAbove: true,
            label: {
              color: '#fff',
              alignTo: 'edge',
              formatter: '{b}: {d}%\n',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15
            },
            labelLine: {
              length: 30,
              length2: 30,
              maxSurfaceAngle: 80,
              lineStyle: {
                color: '#31598d'
              }
            },
            labelLayout: (params) => {
              const isLeft = params.labelRect.x < this.$refs.bizChart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: this.biz.data
          }
        ]
      }
    },
    doneOption() {
      return {
        color: ['#a45b54'],
        grid: {
          top: '10',
          bottom: '30',
          right: '10'
        },
        tooltip: {},
        xAxis: {
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          data: this.done.data.history.map(d => d.month)
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#31598d'
            }
          }
        },
        series: [{
          name: 'aaa',
          type: 'line',
          smooth: true,
          data: this.done.data.history.map(d => d.total)
        }]
      }
    },
    hotOption() {
      return {
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#64aafe' // 0% 处的颜色
          }, {
            offset: 1, color: '#1f52fd' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }],
        grid: {
          top: '10',
          // bottom: '60',
          right: '10'
        },
        tooltip: {},
        xAxis: {
          axisLine: {
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 10
            },
            rotate: 45
          },
          axisTick: {
            show: false
          },
          data: this.hot.data.map(d => d.name)
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#31598d'
            }
          }
        },
        series: [{
          name: 'aaa',
          type: 'bar',
          data: this.hot.data.map(d => d.count)
        }]
      }
    },
    departmentOption() {
      return {
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0, color: '#1f52fd' // 0% 处的颜色
          }, {
            offset: 1, color: '#64aafe' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }],
        grid: {
          top: '10',
          bottom: '30',
          right: '20',
          left: '80'
        },
        tooltip: {},
        xAxis: {
          type: 'value',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: this.department.data.map(d => d.project),
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [{
          name: 'aaa',
          type: 'bar',
          barWidth: '20',
          data: this.department.data.map(d => d.count)
        }]
      }
    },
    conferenceOption() {
      return {
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0, color: '#3069f1' // 0% 处的颜色
          }, {
            offset: 1, color: '#8c50e3' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }],
        grid: {
          top: '10',
          bottom: '30',
          right: '40',
          left: '40'
        },
        tooltip: {},
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: false,
        },
        yAxis: {
          type: 'category',
          data: this.meeting.data.map(d => d.month),
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [{
          name: 'aaa',
          type: 'bar',
          barWidth: '10',
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: ['100%', '-90%'], //在上方显示
                formatter: '{c}',
                fontSize: 10,
                distance: 0,
                textStyle: {
                  //数值样式
                  color: '#fff',
                  fontSize: 10,
                },
              },
            },
          },
          data: this.meeting.data.map(d => d.count)
        }]
      }
    },
    userOption() {
      return {
        color: ['#6b9fcf'],
        grid: {
          top: '10',
          bottom: '30',
          right: '10'
        },
        tooltip: {},
        xAxis: {
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          data: this.newUsersThisWeek.data.map(d => d.day)
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#31598d'
            }
          }
        },
        series: [{
          name: 'aaa',
          type: 'line',
          smooth: true,
          symbolSize : 0,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#306af5' // 0% 处的颜色
              }, {
                  offset: 1, color: 'transparent' // 100% 处的颜色
              }]
            }

        },
          data: this.newUsersThisWeek.data.map(d => d.count)
        }]
      }
    }
  },
  methods: {
    getYear(timestamp) {
      return moment(timestamp).format('YYYY')
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 300px;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  padding: 16px;
  background: #002760;
  color: #fff;

  .module {
    height: 300px;
    // outline: 1px solid #ccc;
    display: flex;
    flex-direction: column;

    .hot-chart {
      flex: 1;
    }

    .top5 {
      flex: 1;

      .item {
        width: 100%;
        display: flex;
        align-items: center;

        .name {
          width: 150px;
        }

        .bar-container {
          flex: 1;
          background: #aab;

          .bar {
            float: right;
            text-align: right;
            padding-right: 4px;
            box-sizing: border-box;
          }
        }
      }
    }

    .base-info {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 8px;
    }

    .chart-title {
      margin-top: 16px;

      .title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
      }

      .unit {
        font-size: 12px;
        text-align: right;
        padding-right: 10px;
        margin-top: 4px;
      }
    }

    .item {

      span {
        color: orange;
      }
    }

    .done-chart {
      width: 100%;
      flex: 1;
    }
  }
}
</style>
